<template>
    <el-menu class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#0B75D81A"
        text-color="#FFFFFF99"
        router 
        :default-active="activePath"
        :collapse="false"
        >
      <SideBarItem v-for="(item,index) in sideBarList" :barItem="item" :key="index"></SideBarItem>
    </el-menu>
</template>

<script>
import SideBarItem from './SideBarItem.vue';
export default {
    name:'Sidebar',
    props:{
        sideBarList:{
            type:Array,
            require:true
        },
        activePath:{
            type:String,
            require:true
        }
    },  
    components:{
        SideBarItem
    },
    methods:{
        handleOpen(){

        },
        handleClose(){

        }
    }
}
</script>

<style lang="less">
.el-menu{
    border-right: none !important;
    .el-menu-item{
        font-size: 16px;
        
    }    
    .el-menu-item:focus, 
    .el-menu-item:hover,
    .submenu__title:hover,
    .el-submenu .el-submenu__title:hover{
        background: linear-gradient(90deg, rgba(11, 117, 216, 0.5) 0%, rgba(8, 136, 254, 0) 102.52%) !important;
    }
    .el-menu-item.is-active{
        color:#ffff;
    }
    .el-submenu__title{
        font-size: 16px;
    } 
}

</style>